<template>
  <div class="main">
    <el-main>
      <div
        style="
          width: 100%;
          min-height: 100%;
          background: #fff;
          margin: -25px auto;
          overflow-y: hidden;
        "
      >
        <div style="margin: 0 auto; width: 1065px">
          <el-row v-if="messageData !== null">
            <el-col :span="14" style="margin-left: -9px">
              <el-row>
                <el-col :span="8">{{ $t("Info.userName") }}:</el-col>
                <el-col :span="16"
                  >{{ messageData.nickName }}
                  <i @click="openDia" class="el-icon-edit s4"></i
                ></el-col>
                <el-dialog
                  :close-on-click-modal="false"
                  title="修改用户名"
                  :visible.sync="dialogFormVisibleName"
                >
                  <el-form :model="form">
                    <el-form-item
                      label="用户名："
                      :label-width="formLabelWidth"
                    >
                      <el-input
                        v-model="form.name"
                        autocomplete="off"
                      ></el-input>
                    </el-form-item>
                  </el-form>
                  <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisibleName = false"
                      >取 消</el-button
                    >
                    <el-button type="primary" @click="changeName"
                      >确 定</el-button
                    >
                  </div>
                </el-dialog>
              </el-row>
              <el-row style="width: 950px">
                <el-col :span="2">{{ $t("Info.account") }}:</el-col>
                <el-col :span="11">
                  <span style="margin-left: 123px">{{
                    messageData.email
                  }}</span>
                </el-col>
                <el-col :span="8">
                  <span
                    style="color: #3a8dff; cursor: pointer"
                    @click="changeWord"
                    >{{ $t("Info.password") }}</span
                  >
                  <el-dialog
                    :close-on-click-modal="false"
                    :close-on-press-escape="false"
                    title="修改密码"
                    :show-close="false"
                    :visible.sync="dialogFormVisible"
                  >
                    <el-form :model="form" :rules="rulesEdit" ref="ruleForm">
                      <template>
                        <el-form-item
                          label="密码"
                          prop="password"
                          label-width="120px"
                        >
                          <el-input
                            v-model="form.password"
                            style="width: 80%"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                        <el-form-item
                          label="确认密码"
                          prop="rpassword"
                          label-width="120px"
                        >
                          <el-input
                            v-model="form.rpassword"
                            style="width: 80%"
                            autocomplete="off"
                          ></el-input>
                        </el-form-item>
                      </template>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                      <el-button @click="dialogFormVisible = false"
                        >取 消</el-button
                      >
                      <el-button type="primary" @click="onOk">确 定</el-button>
                    </div>
                  </el-dialog>
                  <span
                    style="color: #3a8dff; margin-left: 20px; cursor: pointer"
                    @click="quit"
                    >{{ $t("Info.quit") }}</span
                  >
                </el-col>
              </el-row>
              <el-row style="width: 956px">
                <el-col :span="5">{{ $t("Info.balance") }}:</el-col>
                <el-col :span="19">
                  <span style="color: red">￥{{ messageData.userMoney }}</span>
                  <span
                    class="el-icon-refresh s4"
                    style="margin-left: 30px; font-size: 18px"
                    @click="getBalance"
                  ></span>
                  <span
                    style="color: #3a8dff; margin-left: 204px; cursor: pointer"
                    @click="show"
                    >{{ $t("Info.detail") }}</span
                  >
                  <span
                    style="color: #3a8dff; margin-left: 20px; cursor: pointer"
                    @click="recharge"
                    >充值</span
                  >
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
        <el-dialog
          :close-on-click-modal="false"
          class="el-dialog-chong"
          :close-on-press-escape="false"
          title="充值中心"
          :visible.sync="dialogVisible"
          width="600px"
        >
          <p style="font-size: 14px; color: black">订单信息</p>
          <br />
          <p>
            充值账号:
            <span style="color: black; padding-left: 3px">{{
              messageData.email
            }}</span>
          </p>
          <br />
          <div class="coinBtn">
            充值金额
            <div
              style="display: inline-block"
              v-for="item in buttonList"
              :key="item"
            >
              <el-button
                style="margin: 0 10px"
                :class="{ pageActive: currentIndex == item }"
                @click="payMoney(item)"
                >{{ item }}</el-button
              >
            </div>
          </div>
          <br />
          <div>
            请输入：
            <input
              @input="change"
              type="number"
              v-model="Money"
              style="width: 20%; border: 1px solid #ccc; height: 30px"
            />
          </div>
          <br />
          <br />
          <el-button @click="alipay">
            <img class="tubiao" src="@/assets/images/编组备份 11.png" alt="" />
            <span>支付宝支付</span>
            <img
              class="dui"
              v-show="zhi"
              src="@/assets/images/编组 5备份.png"
              alt=""
          /></el-button>
          <el-button style="margin-bottom: 60px" @click="wechatpay">
            <img
              class="tubiao"
              src="@/assets/images/编组备份 10.png"
              alt="" /><span>微信支付</span>
            <img
              class="dui"
              v-show="dui"
              src="@/assets/images/编组 5备份.png"
              alt=""
          /></el-button>
          <div style="margin-left: 350px; margin-top: -100px">
            <div v-if="btn === 2">
              <img
                class="tubiao1"
                src="@/assets/images/编组备份 11.png"
                alt=""
              />支付宝扫码，支付{{ Money }}元
            </div>
            <div v-if="btn === 1">
              <img
                class="tubiao1"
                src="@/assets/images/编组备份 10.png"
                alt=""
              />微信扫码，支付{{ Money }}元
            </div>
            <img width="160px" class="ImageUrl" :src="payImageUrl" alt="" />
            <el-button type="text" @click="open"></el-button>
            <el-button type="text" @click.once="opensu"></el-button>
          </div>
        </el-dialog>
      </div>
      <detail-slot :total="total" :pageSize="pageSize"></detail-slot>
      <AddSlot :isSlot="isSlot" />
      <new-list
        :add-parent-mount="addMount"
        :on-change-parent-detail="onChangeDetail"
      />
    </el-main>
  </div>
</template>

<script>
import bus from "../../assets/eventBus";
import DetailSlot from "../../components/book-order/DetailSlot";
import ajax from "../../common/ajax";
import api from "../../common/api";
import OrderList from "../../components/book-order/OrderList";
import NewList from "../../components/book-order/NewList";
import AddSlot from "../../components/publish-order/AddSlot";
import MainArea from "../../components/MainArea";
import encryption from "../../common/encryption";
import ButtonGroup from "../../components/ButtonGroup.vue";
import QRCode from "qrcode";

let userId;
let pressId;
let culture;
let context;

export default {
  name: "Personal",
  name: "textInput",
  components: { DetailSlot, OrderList, NewList, AddSlot },

  data() {
    const validatePass3 = (rule, value, callback) => {
      var regex = new RegExp("^[A-Za-z0-9]+$");
      if (!regex.test(value)) {
        callback(new Error("密码只允许包含数字、字母"));
      } else {
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.form.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      currentIndex: 1,
      buttonList: [50, 100, 200, 300, 500],
      dialogFormVisibleName: false,
      formLabelWidth: "120px",
      resp: {},
      dialogFormVisible: false,
      messageData: {},
      pageSize: 5,
      total: 0,
      isSlot: true,
      dialogVisible: false,
      payImageUrl: "",
      btn: 0,
      Money: "",
      form: {
        name: "",
        password: "",
        rpassword: "",
      },
      rulesEdit: {
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            min: 6,
            max: 12,
            message: "长度由 6 到 12 个数字或字母组成",
            trigger: "blur",
          },
          { required: true, validator: validatePass3 },
        ],
        rpassword: [{ required: true, validator: validatePass2 }],
      },
      dui: false,
      zhi: false,
    };
  },

  created() {
    userId = this.$route.query.userId;
    pressId = this.$route.query.pressId;
    culture = this.$route.query.culture;
    //初始化获取账户信息
    getUserInfo(this);
  },
  mounted() {
    new QWebChannel(qt.webChannelTransport, function (channel) {
      context = channel.objects.Js2QtFunction;
    });
  },
  updated() {
    let that = this;
    if (that.payImageUrl === "") {
      clearInterval(this.a);
      this.a = null;
      clearTimeout(that.payFun);
      that.payFun = null;
    }
  },
  methods: {
    openDia() {
      this.dialogFormVisibleName = true;
      this.form.name = this.messageData.nickName;
    },
    changeName() {
      let that = this;
      ajax.post({
        url: api.Info.routeName + api.Info.children.edit,
        data: {
          userId: userId,
          nickName: this.form.name,
        },
        success: function (res) {
          that.$message({
            type: "success",
            message: "用户名修改成功",
          });
          that.dialogFormVisibleName = false;
          getUserInfo(that);
        },
        File: function (res) {},
      });
    },
    change(e) {
      this.btn = 0;
      this.payImageUrl = "";
    },
    opensu() {
      let that = this;
      that.$message({
        type: "success",
        message: "充值成功",
      });
      clearInterval(this.a);
      this.a = null;
      clearTimeout(that.payFun);
      that.payFun = null;
    },
    open() {
      let that = this;
      that.btn = 0;
      that.payImageUrl = "";
      that.$alert("二维码已失效，请重新选择支付方式", {
        confirmButtonText: "确定",
        callback: (action) => {
          clearInterval(this.a);
          this.a = null;
        },
      });
    },
    wechatpay() {
      if (this.zhi == true) {
        clearTimeout(this.payFun);
        this.btn = 0;
      }
      // clearTimeout(this.payFun);
      this.dui = true;
      this.zhi = false;
      let that = this;
      let json = encryption.encryptionMxr(
        JSON.stringify({
          userId: userId,
          deviceId: new Date().getTime(),
          type: 2,
          coin: this.Money,
        })
      );
      ajax.post({
        url: api.payment.routeName + api.payment.children.wechatScan,
        data: json,
        success: function (res) {
          this.resp = JSON.parse(encryption.decryptionMxr(res));
          that.btn = 1;
          that.payImageUrl = this.resp.payImageUrl;
          that.orderNo = this.resp.orderNo;
          if (that.orderStatus !== 0) {
            that.payFun = setTimeout(() => {
              successPay(that);
              that.open();
            }, 900000);
          }
        },
        File: function (res) {},
      });
    },

    alipay() {
      if (this.dui == true) {
        clearTimeout(this.payFun);
        this.btn = 0;
      }
      this.zhi = true;
      this.dui = false;
      let that = this;
      let json = encryption.encryptionMxr(
        JSON.stringify({
          userId: userId,
          deviceId: new Date().getTime(),
          type: 1,
          coin: this.Money,
        })
      );
      ajax.post({
        url: api.payment.routeName + api.payment.children.aliScan,
        data: json,
        success: function (res) {
          this.resp = JSON.parse(encryption.decryptionMxr(res));
          that.btn = 2;
          that.payImageUrl = this.resp.payImageUrl;
          that.orderNo = this.resp.orderNo;
          if (that.orderStatus !== 0) {
            that.payFun = setTimeout(() => {
              successPay(that);
              that.open();
            }, 900000);
          }
        },
        File: function (res) {},
      });
    },
    payMoney(e) {
      this.currentIndex = e;
      let that = this;
      this.Money = e;
      that.btn = 0;
      that.payImageUrl = "";
      clearInterval(this.a);
      this.a = null;
      clearTimeout(that.payFun);
      that.payFun = null;
    },
    recharge() {
      this.dialogVisible = true;
      this.btn = 0;
      this.payImageUrl = "";
      this.Money = "";
    },
    onChangeDetail(detailUrl) {
      context.useFunction_Skip(detailUrl);
    },
    addMount(i) {
      bus.$emit("showDetail3", i);
    },
    quit() {
      context.useFunction_logoff();
    },
    changeWord() {
      this.dialogFormVisible = true;
    },
    onOk(form) {
      let that = this;
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          const { password, rpassword } = this.form;
          this.password = this.form.password;
          ajax.post({
            url: api.Info.routeName + api.Info.children.changeP,
            data: {
              lgName: this.messageData.email,
              pwd: this.password,
            },
            success: function (res) {
              that.$message({
                type: "success",
                message: "密码修改成功",
              });
              that.dialogFormVisible = false;
              that.form = {};
            },
            File: function (res) {},
          });
        }
      });
    },
    /**
     * 刷新账户余额
     */
    getBalance() {
      getUserInfo(this);
    },

    /**
     * 打开消息明细弹窗
     */
    show() {
      bus.$emit("showDetail2");
    },
  },
  watch: {
    btn(v) {
      let that = this;
      if (v == 1 || v == 2) {
        this.a = setInterval(() => {
          successPay(that);
          console.log(that.orderStatus);
          if (that.orderStatus === 0) {
            clearInterval(this.a);
            this.a = null;
            that.dialogVisible = false;
            that.opensu();
            clearTimeout(that.payFun);
            that.payFun = null;
          }
        }, 100);
        that.orderStatus = undefined;
      } else {
        that.orderStatus = undefined;
        clearInterval(this.a);
      }
    },
    dialogVisible(v) {
      this.zhi=false
      this.currentIndex=1
      this.dui=false
      let that = this;
      if (!v) {
        that.orderStatus = undefined;
        that.payImageUrl = "";
        clearInterval(this.a);
        this.a = null;
        clearTimeout(that.payFun);
        that.payFun = null;
      }
    },
  },
};

/**
 * 获取用户信息
 */
function getUserInfo(that) {
  ajax.get({
    url: api.Info.routeName + api.Info.children.account + userId,
    success: function (res) {
      that.messageData = JSON.parse(encryption.decryptionMxr(res));
    },
    error(e) {},
  });
}

function successPay(that) {
  ajax.get({
    url: api.payment.routeName + api.payment.children.orderNo,
    data: { orderNo: that.orderNo },
    success: function (res) {
      that.respo = JSON.parse(encryption.decryptionMxr(res));
      that.orderStatus = that.respo.orderStatus;
      console.log(that.orderStatus);
    },
    File: function (res) {
      that.$message.error("充值失败");
    },
  });
}
</script>

<style scoped>
.main {
  min-height: 100%;
  width: 100%;
  background: #eff3f5;
  padding-bottom: 13px;
}

.el-main {
  color: #333;
}

.el-aside,
.el-main {
  overflow-y: hidden;
}

.el-row {
  margin: 25px 5px;
}

.s4:hover {
  cursor: pointer;
}
</style>
<style>
.el-dialog-chong .el-dialog__header {
  background-color: #4381e6;
}
.el-dialog-chong .el-dialog__header span,
.el-dialog-chong .el-dialog__header .el-icon-close {
  font-size: 20px;
  color: white;
}
.el-dialog-chong .el-dialog__body {
  margin-left: 6px;
}
.coinBtn .el-button--primary.is-plain {
  background: #fff;
  border-color: #ccc;
  color: #000;
}
.dui {
  position: relative;
  top: -12px;
  right: -20px;
}
.tubiao {
  position: relative;
  top: -3px;
}
.tubiao ~ span {
  position: relative;
  left: 5px;
  top: -7px;
}
.pageActive {
  background: #dee9fb !important;
  border-color: #4381e6;
}
.tubiao1 {
  position: relative;
  top: 3px;
  margin-right: 5px;
  width: 20px;
}
</style>
